/*
* @Author: shenyanqiu
* @Date:   2017-12-04 23:45:03
* @Last Modified by:   shenyanqiu
* @Last Modified time: 2017-12-05 17:41:29
*/
import {
  Modal,
  Button,
  Form,
  Input,
  TreeSelect
} from 'antd';
import TopRightButton from './../../../components/TopOperation/TopRightButton'
import styles from './AddNotice.less'

const FormItem = Form.Item;
const TextArea = Input.TextArea;
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

const treeData = [{
  label: '新闻部',
  value: '5a308bdf64ea6e40466fe750',
  key: '5a308bdf64ea6e40466fe750',
  children: [{
    label: '申燕秋',
    value: '5a308bdf64ea6e40466fe756',
    key: '5a308bdf64ea6e40466fe756',
  }],
}, {
  label: '组织部',
  value: '5a308bdf64ea6e40466fe751',
  key: '5a308bdf64ea6e40466fe751',
  children: [{
    label: '大胖橘1号',
    value: '5a308bdf64ea6e40466fe755',
    key: '5a308bdf64ea6e40466fe755',
  }, {
    label: '大胖橘2号',
    value: '5a308bdf64ea6e40466fe757',
    key: '5a308bdf64ea6e40466fe757',
  }, {
    label: '大胖橘3号',
    value: '5a308bdf64ea6e40466fe758',
    key: '5a308bdf64ea6e40466fe758',
  }],
}];

class AddNoticeModal extends React.Component {
  state = {
    // loading: false,
    visible: false,
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  // 提交
  handleOk = (e) => {
    const { doCreateNotice, loading, form: {resetFields, validateFields} } = this.props;
    // this.setState({ loading: true });
    e.preventDefault();
    validateFields((err, values) => {
      if (err){
        this.setState({ visible: true });
        return;
      }
      // 提交添加通知数据
      // console.log('Received values of form: ', values);
      doCreateNotice(values);
      this.setState({ visible: false });
      resetFields();
    });

  }
  handleCancel = () => {
    this.setState({ visible: false });
  }
  render() {
    const { loading, form: { getFieldDecorator } } = this.props;
    const { visible } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    // 配置树形选择框
    const tProps = {
      treeData,
      onChange: this.onChange,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      searchPlaceholder: '请选择通知人员或部门',
    };
    return (
      <div>
        <TopRightButton contentText="添加工作通知" clickHandle={this.showModal}/>
        <Modal
          visible={visible}
          title="添加工作通知"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>返回</Button>,
            <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
              提交
            </Button>,
          ]}
        >
          <Form className={styles.formModal} hideRequiredMark>
            <FormItem label="接受者" hasFeedback {...formItemLayout}>
                {getFieldDecorator('users', {
                rules: [{  required: true, message: '通知人员不能为空!' }],
              })(<TreeSelect {...tProps} />)}
              </FormItem>
              <FormItem
              {...formItemLayout}
                label="标题"
              >
                {getFieldDecorator('title', {
                  rules: [{
                    required: true, message: '标题不能为空！'
                  },]
                })(
                  <Input placeholder={"请输入标题"} />
                )}
              </FormItem>
              <FormItem label="内容" hasFeedback {...formItemLayout}>
                {getFieldDecorator('description', {
                rules: [{ required: true, message: '内容不能为空!' }],
              })(<TextArea rows={"4"} placeholder={"请输入内容，内容无格式，字数限制为500字"}/>)}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default Form.create()(AddNoticeModal);
